<template>
  <div class="b-g-f">
    <van-uploader
      v-model="fileList"
      accept="image/*"
      :multiple="multiple"
      :before-delete="beforeDelete"
      :show-upload="false"
      :deletable="!isDetails"
      :max-count="maxCount"
    >
    </van-uploader>
    <span
      v-if="fileList.length < maxCount"
      class="p-t-5"
      style="display: inline-block;"
    >
      <img
        v-if="!isDetails"
        class="upload-img"
        src="@/assets/img/uploadImg.png"
        alt=""
        @click="upload"
      />
    </span>
  </div>
</template>

<script>
import { getHandle } from '@/api'
import { Uploader, Button, Icon } from 'vant'
import pageList from '@/router/index.js'
import { imgPaths } from '@/filters'
export default {
  components: {
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Icon.name]: Icon
  },
  props: {
    value: Array,
    maxCount: {
      type: Number,
      default: 9
    },
    multiple: {
      type: Boolean,
      default: true
    },
    isDetails: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  watch: {
    value(val) {
      if (!(val && val.length > 0)) {
        this.fileList = []
      } else {
        this.fileList = val.map((item) => {
          if (item != '') {
            if (typeof item === 'object') {
              return item
            } else {
              const a = {
                url: process.env.VUE_APP_BASE_API + item,
                baseUrl: item,
                isImage: true
              }
              return a
            }
          }
        })
      }
    }
  },
  created() {
    const self = this
    this.$nextTick(() => {
      if (!(this.value && this.value.length > 0)) {
        this.fileList = []
      } else {
        self.fileList = self.value
        self.fileList = self.fileList.map((item) => {
          // item.url = imgPaths(item);
          // item.isImage = true;

          return {
            url: process.env.VUE_APP_BASE_API + item,
            baseUrl: item,
            isImage: true
          }
        })
      }
    })
    this.$bridge.register('showImg', (data) => {
      const a = {
        url: process.env.VUE_APP_BASE_API + data,
        baseUrl: data,
        isImage: true
      }
      self.fileList.push(a)
      self.$emit('input', self.fileList.map(item => { return self.fileList }))
    })
  },

  mounted() {},
  methods: {
    upload() {
      //   let a = {
      //   url : process.env.VUE_APP_BASE_API + '/fms/api/show/4e9bd641-f4b9-45e7-a9ba-246b6cda0603_0/1639038515898417.jpeg',
      //     baseUrl : '/fms/api/show/4e9bd641-f4b9-45e7-a9ba-246b6cda0603_0/1639038515898417.jpeg',
      //   isImage : true
      // };
      // this.fileList.push(a);
      // this.$emit("input", this.fileList.map(item=> { return {url: item.baseUrl}}));
      this.$bridge.call('selectImage')
      this.$bridge.call('base.selectImage')
    },
    beforeDelete(file, detail) {
      this.fileList.splice(detail.index, 1)
      this.$emit('input', this.fileList)
      return true
    }
  }
}
</script>

<style scoped>
.upload-img {
  width: 88px;
  height: 83px;
}
</style>
